<template>
	<view class="c-container" style="border-bottom: 1px solid #dedede;">
		<view class="tab-control">
			<view class="tab-control-item" :class="{active: currentIndex == 0}" @click="tabClick('base')">
				<text>婚车</text>
			</view>
		</view>
		<swiper :style="{height: swiperHeight + 'px'}" @change="swiperChange" :current="swiperCurrent">
			<swiper-item @touchmove.stop>
				<view class="swiper-item">
					<baseInfo :swiperHeight="swiperHeight" :car="car" class="carBaseInfo" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import baseInfo from './detail/base.vue';
	export default {
		components: {
			baseInfo,
		},
		props:{
			car:{
				type: Array,
				default(){
					return []
				}
			},
		},
		data() {
			return {
				currentIndex: 0,
				swiperCurrent: 0,
				swiperHeight: 0, // 滑动区域高度
			}
		},
		mounted() {
			this.getSwiperHeight()
		},
		methods: {
			tabClick(type) {
				switch (type) {
					case 'base':
						this.currentIndex = 0;
						this.swiperCurrent = 0;
						break;
				}
			},
			swiperChange(e) {
				let index = e.detail.current
				this.currentIndex = index;
			},
			// 动态获取高度
			getSwiperHeight(){
				let height = []
				let query1 = uni.createSelectorQuery().select('.carBaseInfo');
				query1.boundingClientRect(function(data){
					height.push(data.height)
				}).exec()
				
				let swiperHeight = height[0];
				for(let i = 1; i<height.length; i++){
					if(height[i] > swiperHeight){
						swiperHeight = height[i]
					}
				}
				this.swiperHeight = swiperHeight
			}
		}
	}
</script>

<style lang="less">
	.tab-control {
		display: flex;
		text-align: center;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		background-color: #fff;

		.tab-control-item {
			flex: 0 25%;
		}

		.tab-control-item text {
			padding: 5px;
		}

		.active {
			color: #007AFF;
		}

		.active text {
			border-bottom: 3px solid #007AFF;
		}

	}
</style>
